<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- nav头部区域 -->
    <header id="zHeader">
        <nav>
            <a href="#" class="logo">
                <img src="./images/logo.svg" alt="">
            </a>
            <ul class="navbox">
                <li class="nav0">首页</li>
                <li class="nav1">
                    <a href="#" class="faxian">
                        发现
                    </a>
                    <div class="menu-list">
                        <div>
                            <a href="#">平面</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">UI</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">网页</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">插画</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">漫画</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">摄影</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">空间</a>
                        </div>
                        <div>
                            <a href="#">工业/产品</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">三维</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">影视</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">手工艺</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">纯艺术</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">服装</a>
                            <i class="iconfont icon-vertical_line"></i>
                        </div>
                        <div>
                            <a href="#">其它</a>
                        </div>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="zhiwei">
                        职位
                    </a>
                    <div>
                        <p>职位</p>
                        <p>公司</p>
                        <p>+发布职位</p>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="huodong">
                        活动
                    </a>
                    <div>
                        <p>设计大赛</p>
                        <p>专题大赛</p>
                        <p>线上活动</p>
                        <p>线下活动</p>
                        <p>学习音频</p>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="sucai">
                        正版素材
                    </a>
                    <div>
                        <p>设计大赛</p>
                        <p>专题大赛</p>
                        <p>线上活动</p>
                        <p>线下活动</p>
                        <p>学习音频</p>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="kecheng">
                        课程
                    </a>
                    <div>
                        <p>设计大赛</p>
                        <p>专题大赛</p>
                        <p>线上活动</p>
                        <p>线下活动</p>
                        <p>学习音频</p>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="banquan">
                        版权保护
                    </a>
                    <div>
                        <p>设计大赛</p>
                        <p>专题大赛</p>
                        <p>线上活动</p>
                        <p>线下活动</p>
                        <p>学习音频</p>
                    </div>
                </li>
                <li class="nav2">
                    <a href="#" class="qita">
                        ···
                    </a>
                    <div>
                        <p>设计大赛</p>
                        <p>专题大赛</p>
                        <p>线上活动</p>
                        <p>线下活动</p>
                        <p>学习音频</p>
                    </div>
                </li>
            </ul>
            <div class="magnifier">
                <i  class="iconfont icon-search"></i>
            </div>
            <div class="user-center">
                <div>
                    <i class="iconfont icon-denglu"></i>
                </div>
                <ul>
                    <li>
                        <a href="#">登录</a>
                        <i class="iconfont icon-shuxian"></i>
                        <a href="#">注册</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div id="container">
        <a id="prev_btn"><img src="./images/zuo-copy.png" /></a>
        <a id="next_btn"><img src="./images/you-copy.png" /></a>
        <ul id="banner_container">
            <li><img src="./images/banner7.png" alt=""></li>
            <li><img src="./images/banner2.jpg" alt=""></li>
            <li><img src="./images/banner3.jpg" alt=""></li>
            <li><img src="./images/banner4.jpg" alt=""></li>
            <li><img src="./images/banner5.jpg" alt=""></li>
            <li><img src="./images/banner6.png" alt=""></li>
            <li><img src="./images/banner1.png" alt=""></li>
            <li><img src="./images/banner7.png" alt=""></li>
        </ul>
    </div>

    <!-- 广告位 -->
    <ul class="advtop">
        <li>
            <a href="#">
                <img src="https://reviveimg.hellorf.com/www/images/03c017e48c19cea307ddbecb2066f47d.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://reviveimg.hellorf.com/www/images/8adf90f1b7bc6cb211f74d7bb1249377.jpeg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://reviveimg.hellorf.com/www/images/68ebdb823dca5abd5cca9c4d6e1ac81f.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://reviveimg.hellorf.com/www/images/672ccff39cc6eb91d518d79ac91d26d0.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://reviveimg.hellorf.com/www/images/1a57cef01978c4d9d75fe5298bea0d2e.jpg" alt="">
            </a>
        </li>
    </ul>

    <!-- 页面主体导航 -->
    <ul class="subnav-content">
        <li>
            <a href="#">首页推荐</a>
        </li>
        <li>
            <a href="#">最新发布</a>
        </li>
    </ul>
    <div class="all-work-list">
        <div class="work-list">
            <div class="work-list-box">
                <!-- <div class="card-box">
                    <div class="card-img">
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </div>
                    <div class="card-info">
                        <p class="card-info-title">
                            <a href="#">
                                不要和你妈争辩
                            </a>
                        </p>
                        <p class="card-info-type">插画-商业插画</p>
                        <p class="card-info-item">
                            <span>
                                <i class="iconfont icon-yanjing"></i>
                                1719
                            </span>
                            <span>
                                <i class="iconfont icon-liuyan1"></i>
                                8
                            </span>
                            <span>
                                <i class="iconfont icon-zan1"></i>
                                112
                            </span>
                        </p>
                    </div>
                    <div class="card-item">
                        <span class="user-avatar">
                            <a href="#">
                                <img src="https://img.zcool.cn/community/00c2fe59f9446ea801202b0c8f2b23.jpg@80w_80h_1c_1e_1o_100sh.jpg" alt="">
                                <p>小排排排</p>
                            </a>
                        </span>
                        <span class="time">
                            3小时前
                        </span>
                    </div>
                </div> -->
            </div>
                <!-- 上一页下一页 -->
            <div class="clear">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">7</a>
                <span>...</span>
                <a href="#">99</a>
                <a href="#">100</a>
                <a href="#">&gt;</a>
            </div>
        </div>
    </div>
    <div class="advlong-default">
        <div>
            <img src="./images/buttonimg.jpg" alt="">
        </div>
    </div>
    <div class="homePageGogoupAd">
        <div class="work-pure-wrap">
            <div class="work-pure">
                <span>推荐课程</span>
                <span id="qiehuan">换一换</span>
            </div>
            <div class="gogoup-card-list-box">
                <div>
                    <a href="#">
                        <img src="./images/imgs1.jpg" alt="">
                    </a>
                    <div>
                        <p>MG动画应用方法</p>
                    </div>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/imgs2.jpg" alt="">
                    </a>
                    <div>
                        <p>温暖插画世界</p>
                    </div>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/imgs3.jpg" alt="">
                    </a>
                    <div>
                        <p>绘本风格插画绘制</p>
                    </div>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/imgs4.jpg" alt="">
                    </a>
                    <div>
                        <p>敦煌风岩彩案例进阶课</p>
                    </div>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/imgs5.jpg" alt="">
                    </a>
                    <div>
                        <p>实用商业插画系统教程</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部板块 -->
    <footer>
        <div class="footer-wrapper">
            <div class="footer-wrapper-top">
                <div class="footer-wrapper-top-left">
                    <a href="#">
                        <i class="iconfont icon-icon--"></i>
                        移动版
                    </a>
                    <a href="#">关于我们</a>
                    <a href="#">用户协议</a>
                    <a href="#">隐私政策</a>
                    <a href="#">侵权申诉</a>
                    <a href="#">企业服务</a>
                    <a href="#">帮助中心</a>
                    <a href="#">联系我们</a>
                    <a href="#">中文</a>
                    <a href="#">English</a>
                </div>
                <div class="footer-wrapper-top-right">
                    <i class="iconfont icon-weixin1"></i>
                    <i class="iconfont icon-weibo1"></i>
                </div>
            </div>
            <div class="footer-wrapper-button">
                <div class="footer-wrapper-button-top">
                    <span>
                        <img src="./images/jingcha.jpg" alt="">
                        京公网安备11010502000501号
                    </span>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">广播电视节目制作经营许可证（京）字第06990号</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">京ICP备11017824号</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">京ICP证130164号</a>
                </div>
                <div class="footer-wrapper-button-button">
                    <a href="#">营业执照</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">网上有害信息举报专区</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">不良信息举报电话：010-56538658</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">举报邮箱  jubao@zcool.com.cn</a>
                    <i class="iconfont icon-tubiaozhizuo-1"></i>
                    <a href="#">联系电话：010-56538600</a>
                    <span>Copyright © 2006-2020 ZCOOL站酷</span>
                </div>
            </div>
        </div>
    </footer>
    <div class="sidebar-fixed-wrapper">
        <div class="sidebar-fixed_box">
            <i class="iconfont icon-tubiaozhizuo-"></i>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/banner.js"></script>
<script src="./js/imgbox.js"></script>
<script src="./js/backtop.js"></script>
<!-- <script src="./js/ajaximg.JS"></script> -->
</html>